<template>
  <div>
    <el-dialog
      title="项目信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              项目名称
            </template>
            {{ projectInfo.projectName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              项目编号
            </template>
            {{ projectInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              所属类型
            </template>
            {{ projectInfo.productType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              类型描述
            </template>
            {{ projectInfo.productTypeDescription }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              涉及产品
            </template>
            {{ projectInfo.products }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              项目描述
            </template>
            {{ projectInfo.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              创建用户
            </template>
            {{ projectInfo.creator }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              创建时间
            </template>
            {{ projectInfo.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              修改用户
            </template>
            {{ projectInfo.modifier }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              修改时间
            </template>
            {{ projectInfo.updateTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Object,
    },
  },
  data() {
    return {
      projectInfo: {
        projectName: "",
        id: "",
        productType: "",
        productTypeDescription: "",
        products: "",
        description: "",
        creator: "",
        createTime: "",
        modifier: "",
        updateTime: "",
      },
    };
  },
  computed: {
    products() {
      const res = this.data.productNames.map((product) => {
        return product.productName;
      });
      return res.join(",");
    },
  },
  methods: {
    open() {
      let productArr = this.data.productNames.map((product) => {
        return product.productName;
      });
      this.projectInfo = this.data;
      this.projectInfo.productType = this.data.typeBriefInfo.productType;
      this.projectInfo.productTypeDescription =
        this.data.typeBriefInfo.description;
      this.projectInfo.products = productArr.toString();
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style>
</style>
